<template>
    <view class="container-c">
        <popup @cancel="onCancel" :title="title" :cancel="cancel">
            <view v-for="(item, index) in list" :key="index">
                <view v-if="item.text" class="popup-input-block">
                    <text>{{ item.text }}</text>
                    <input
                        class="popup-input"
                        :type="item.type || 'text'"
                        @click="onUpspring(index)"
                        v-model="item.value"
                        placeholder-class="popup-input-pl"
                        :placeholder="item.placeholder"
                    />
                </view>
            </view>
            <button class="short-btn active" @click="onSubmit">确定</button>
        </popup>
    </view>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
import popup from '../popup/popup.vue'
const props = defineProps(['title', 'cancel', 'list'])
const emits = defineEmits(['submit', 'cancel'])
const currentItem = ref(0)

const onUpspring = (index: number) => {
    currentItem.value = index
}
const onSubmit = () => {
    emits('submit', props.list)
}

const onCancel = () => {
    emits('cancel')
}
</script>

<style lang="scss" scoped>
.popup-input-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 590rpx;
    height: 88rpx;
    background: rgba(232, 233, 234, 0.26);
    border-radius: 8rpx;
    font-size: 32rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    position: relative;
}
.popup-input {
    width: 380rpx;
    font-size: 32rpx;
}
.popup-input-pl {
    color: #a6a8af;
}
.short-btn {
    margin-top: 50rpx;
}
.popup-input-sign {
    position: absolute;
    right: 30rpx;
}
</style>
